let stateAll = false //是否全选状态，true选中,false未选中
const tableEle = document.querySelector('table')
const totalPriceEle = document.querySelector('.total-price')

/**
 * 显示商品列表数据
 *   遍历商品列表数据,动态生成商品项html元素 
 *   生成的商品项html元素 做内容赋值给 table 显现
 */


function showProductList() {
    let cartListStr = localStorage.getItem('CARTLIST')
    let cartArray = JSON.parse(cartListStr) || [] //购物车数组,来自localstorage

    let str = ` <tr>
                    <th><input type="checkbox" class="checkbox-all" ${stateAll?'checked':''} >全选</th>
                    <th>商品序号</th>
                    <th>商品图片</th>
                    <th>商品名称</th> 
                    <th>单价</th>
                    <th>数量</th>
                    <th width="100px">小计</th>
                    <th>操作</th>                   
                </tr>`

    let trArr = cartArray.map(function (item, index) {
        return ` <tr>
                    <td><input type="checkbox" class="checkbox-item" ${item.state?'checked':''} ></td>
                    <td>${item.id}</td>
                    <td><img src="${item.url}" alt=""></td>
                    <td>${item.name}</td>
                    <td>￥${item.price}</td>
                    <td><input type="button" name="minus" value="-" ${item.num<=0?'disabled':''} ><input type="text" name="amount"
                            value="${item.num}"><input type="button" name="plus" value="+"></td>
                    <td>￥${item.singlePrice}</td>
                    <td>
                        <a href="#" class="delete-btn">删除</a>
                    </td>                   
                </tr>`
    })

    str = str + trArr.join('')
    tableEle.innerHTML = str
}

/**
 * 操作购物车商品
 */
function onProductCart() {


    tableEle.onclick = function (e) {
        let cartListStr = localStorage.getItem('CARTLIST')
        let cartArray = JSON.parse(cartListStr) || [] //购物车数组,来自localstorage

        e = e || window.event //事件对象
        let target = e.target || e.srcElement //事件目标对象

        //数量加一
        if (target.value == '+') {
            //操作数据
            // 1.找当前操作的商品项序列号
            let id = target.parentElement.parentElement.firstElementChild.nextElementSibling.innerHTML
            //2.根据id查找数组记录
            let product = cartArray.find(item => item.id == id)
            //3;操作数据，让数量加一
            product.num++

            //4.计算单个商品总价
            product.singlePrice = (product.num * product.price).toFixed(2)

        }
        //数量减一
        if (target.value == '-') {
            // 1.找当前操作的商品项序列号
            let id = target.parentElement.parentElement.firstElementChild.nextElementSibling.innerHTML
            // 2. 遍历productList商品数组，查找满足条件的记录并返回
            let product = cartArray.find(item => item.id == id)
            //3. 商品数组数量值减一
            product.num--
            //4.计算单个商品总价
            product.singlePrice = (product.num * product.price).toFixed(2)

        }
        //删除
        if (target.getAttribute('class') == 'delete-btn') {

            // 1.找当前操作的商品项序列号
            let id = target.parentElement.parentElement.firstElementChild.nextElementSibling.innerHTML
            //遍历数组，查找满足条件的数组索引号
            let index = cartArray.findIndex(item => item.id == id)
            //删除数组元素
            cartArray.splice(index, 1)
        }

        //全选
        if (target.getAttribute('class') == 'checkbox-all') {
            //简写
            stateAll = !stateAll
            cartArray.forEach(item => item.state = stateAll)
        }
        //所有复选框事件
        if (target.getAttribute('class') == 'checkbox-item') {
            //操作数据
            //设置复选框数据状态
            //确定当前选中的复选框,根据id
            let id = target.parentElement.nextElementSibling.innerHTML
            let product = cartArray.find(item => item.id == id)

            //改变选中复选框状态
            product.state = !product.state
            //根据复选框状态确定全选框状态
            stateAll = cartArray.every(item => item.state == true)
        }

        //持久存储购物车数组到localStorage
        localStorage.setItem('CARTLIST', JSON.stringify(cartArray))
        //重新加载页面
        showProductList()
        //6.所有商品总价
        totalPrice(cartArray)
    }
}

/**
 * 所有商品总价
 *   思路: 遍历商品数组，将所有singlePrice累加求和
 */
function totalPrice(cartArray) {
    let sum = cartArray.reduce((s, item) => s += Number(item.singlePrice), 0)
    totalPriceEle.innerHTML = `￥${sum.toFixed(2)}`
}

/**
 *  随机
 * @param {*} x 
 * @param {*} y 
 * @returns 
 */
function getRandom(x, y) {
    var m = Math.min(x, y)
    var n = Math.max(x, y)
    return Math.floor(Math.random() * (n - m) + m)
}

showProductList()
onProductCart()
let cartListStr = localStorage.getItem('CARTLIST')
let cartArray = JSON.parse(cartListStr) || [] //购物车数组,来自localstorage
totalPrice(cartArray)